<template>
  <div>
    <Panel title="用水分析" width="380px">
      <div class="chart-container">
        <div style="height: 100%; width: 100%" ref="chartWaterRef"></div>
      </div>
      <div class="chart-container">
        <div style="height: 100%; width: 100%" ref="chartWaterBarRef"></div>
      </div>
    </Panel>
    <Panel title="用电分析" width="380px">
      <div class="chart-container">
        <div style="height: 100%; width: 100%" ref="chartElectricityRef"></div>
      </div>
      <div class="chart-container">
        <div style="height: 100%; width: 100%" ref="chartElectricityBarRef"></div>
      </div>
    </Panel>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { shuffle, cloneDeep, throttle, debounce } from "lodash-es";

const chartWaterRef = ref();
const chartElectricityRef = ref();

const chartWaterBarRef = ref();
const chartElectricityBarRef = ref();

const year = ["2015", "2015", "2015", "2015", "2015", "2015", "2015", "2015"];
const floor = ["1F", "2F", "3F", "4F", "5F", "6F", "7F", "8F"];
const color = [
  {
    type: "linear",
    x: 0,
    y: 1,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#2560FF",
      },
      {
        offset: 1,
        color: "#5DFFFF",
      },
    ],
    global: false,
  },
  {
    type: "linear",
    x: 0,
    y: 1,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#FF4C25",
      },
      {
        offset: 1,
        color: "#FFD25D",
      },
    ],
    global: false,
  },
];
const option = {
  grid: {
    left: 30,
    right: 10,
    top: 20,
    bottom: 20,
  },
  legend: {
    icon: "roundRect",
    data: [],
    textStyle: {
      color: "#FFFFFF",
    },
  },
  tooltip: {
    trigger: "axis",
  },
  color,
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      lineStyle: {
        color: "#FFFFFF80",
      },
    },
    axisTick: {
      show: true,
      length: 2,
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#FFFFFF80",
      },
    },
    axisTick: {
      show: true,
      length: 2,
    },
  },
  series: [],
};

const water = {
  name: "水",
  symbol: "none",
  data: [725, 932, 813, 680, 1290, 922, 890,718],
  type: "line",
  smooth: true,
  barWidth:10,
  areaStyle: {
    opacity: 0.8,
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#2560FF80",
      },
      {
        offset: 1,
        color: "#5DFFFF00",
      },
    ]),
  },
};
const electricity = {
  name: "电",
  symbol: "none",
  data: [150, 232, 201, 154, 190, 330, 410,256],
  type: "line",
  smooth: true,
  barWidth:10,
  areaStyle: {
    opacity: 0.8,
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
        offset: 0,
        color: "#FF4C2580",
      },
      {
        offset: 1,
        color: "#FFD25D00",
      },
    ]),
  },
};
onMounted(() => {
  const chartWaterOption = cloneDeep(option);
  chartWaterOption.xAxis.data = year;
  chartWaterOption.series = [water];
  chartWaterOption.legend.data = ["水"];
  chartWaterOption.color = [color[0]];
  echarts.init(chartWaterRef.value).setOption(chartWaterOption);


  const chartWaterBarOption = cloneDeep(option);
  chartWaterBarOption.xAxis.data = floor;
  water.type="bar";
  water.barWidth= 10,
  chartWaterBarOption.series = [water];
  chartWaterBarOption.legend.data = ["水"];
  chartWaterBarOption.color = [color[0]];
  chartWaterBarOption.legend.show=false;
  echarts.init(chartWaterBarRef.value).setOption(chartWaterBarOption);


  const chartElectricityOption = cloneDeep(option);
  chartElectricityOption.xAxis.data = year;
  chartElectricityOption.series = [electricity];
  chartElectricityOption.legend.data = ["电"];
  chartElectricityOption.color = [color[1]];
  echarts.init(chartElectricityRef.value).setOption(chartElectricityOption);

  const chartElectricityBarOption = cloneDeep(option);
  chartElectricityBarOption.xAxis.data = floor;
  electricity.type="bar";
  electricity.barWidth= 10,
  chartElectricityBarOption.series = [electricity];
  chartElectricityBarOption.legend.data = ["电"];
  chartElectricityBarOption.color = [color[1]];
  chartElectricityBarOption.legend.show=false;
  echarts.init(chartElectricityBarRef.value).setOption(chartElectricityBarOption);
});
</script>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 210px;
  padding: 16px 0px;
}
</style>
